<template>
  <image @error="loadError" class="avatar pointer" :src="imgSrc" :style="styles" lazy />
</template>

<script>
import DefaultAvatar from '@/static/img/avatar.png'
import DefaultGroupAvatar from '@/static/img/group_avatar.png'
export default{
	props: {
		src: { type: String, default: DefaultAvatar },
		size: { type: String, default: '44px' },
		radius: { type: String, default: '4px' },
		group: { type: Boolean, default: false },
	},
	data(){
		return {
			imgSrc: ''
		}
	},
	computed: {
		styles(){
			return {
				width: this.size,
				height: this.size,
				borderRadius: this.radius,
			}
		},
	},
	watch: {
		src: {
			handler(newVal){
				this.imgSrc = newVal || (this.group ? DefaultGroupAvatar : DefaultAvatar)
			},
			immediate: true
		}
	},
	methods: {
		loadError() {
		  this.imgSrc = this.group ? DefaultGroupAvatar : DefaultAvatar
		}
	}
}
</script>

<style lang="scss" scoped>

</style>